<template>
  <view>
    <!-- :headers="headers" -->
    <el-upload
      class="avatar-uploader"
      :action="action"
      :show-file-list="false"
      :on-success="onSuccess"
      :disabled="disabled"
      :accept="accept"
    >
      <view v-if="isShow && !url" class="image-view err-image">
        <span class="err-image-text">加载失败</span>
      </view>
      <view v-else-if="url" class="image-view" @click.stop>
        <el-image
          :src="url"
          fit="contain"
          class="avatar-img"
          :preview-src-list="[url]"
          @click.stop
        ></el-image>
        <label v-if="!isShow" class="item-status-label" @click.stop>
          <i class="el-icon-delete" @click.stop="deleteEvent"></i>
        </label>
      </view>
      <el-button v-else class="uploader">
        <el-image
          :src="type == 1 ? idcardHead : idcardBack"
          fit="fit"
          class="uploader-iamge"
          @click.stop
        />
        <view class="uploader-view">
          <!-- <i class="el-icon-plus avatar-uploader-icon"></i> -->
          <view class="uploader-text">
            {{ type == 1 ? "身份证正面" : "身份证背面" }}
          </view>
        </view>
      </el-button>
    </el-upload>
  </view>
</template>
  
  <script>
// import { getToken } from "@/utils/auth";

export default {
  name: "UpLoadIdCard",
  props: {
    disabled: Boolean,
    isShow: Boolean,
    type: {
      type: String,
      default: "1",
    },
    url: {
      type: String,
      default: "",
    },
    accept: {
      type: String,
      default: ".jpg,.png,.jpeg",
    },
  },
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/pc/upload`,
      idcardBack: require("@/static/pc/idcard_back.png"),
      idcardHead: require("@/static/pc/idcard_head.png"),
      //   headers: {
      //     Authorization: `Bearer ${getToken()}`,
      //   },
    };
  },
  methods: {
    onSuccess(response, file, fileList) {
      this.$emit("change", response.data);
    },
    deleteEvent() {
      this.$emit("delete");
    },
  },
};
</script>
  
  <style scoped lang="scss">
$width: 260px;
$height: 156px;
.avatar-uploader {
  width: $width;
  height: $height;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  @extend .column;
  color: #929292;

  .image-view {
    width: $width;
    height: $height;
    border-radius: 2px;
    position: relative;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #d9d9d9;

    .item-status-label {
      position: absolute;
      right: -17px;
      top: -7px;
      width: 46px;
      height: 26px;
      background: #409eff;
      text-align: center;
      transform: rotate(45deg);
      box-shadow: 0 1px 1px #ccc;
      .el-icon-delete {
        margin-right: 10px;
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        transform: rotate(-45deg);
        color: #ffffff;
        &:hover {
          .image-hover {
            display: flex;
          }
        }
      }
    }

    .image-hover {
      display: none;
      @extend .row;
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 2px;
      top: 0;
      left: 0;
      z-index: 10;
      background: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      font-size: 24px;
    }

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }
  ::v-deep .el-upload {
    width: $width;
    height: $height;
  }
  .err-image {
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    @extend .column;

    .err-image-text {
      font-size: 14px;
      color: #c0c4cc;
    }
  }
  .uploader {
    width: $width;
    height: $height;
    background: #f5f5f5;
    border: 1px dashed #d9d9d9;
    @extend .column;
    padding: 0 !important;
    position: relative;

    .uploader-iamge {
      width: 100%;
      height: 100%;
      filter: grayscale(100%) opacity(30%);
    }

    .uploader-view {
      width: 100%;
      height: 100%;
      @extend .column;
      position: absolute;
      left: 0;
      top: 0;

      .avatar-uploader-icon {
        font-size: 20px;
      }

      .uploader-text {
        font-size: 14px;
        margin-top: 68px;
      }
    }
  }
}
</style>
  